<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册表单</title>
		<style type="text/css">
			input{
				outline: none;
			}
			table{
				box-sizing: border-box;
				padding: 16px;
				background-color:orangered;
				margin: 140px auto;
			}
			#cancel{
				margin-left: 20px;
			}
		</style>
	</head>
	<body>
		<div id="table">
			<table border="0">
				<tr>
					<th>用户名</th>
					<td><input type="text" id="userName" value="" placeholder="*请输入账号" /></td>
				</tr>
				<tr>
					<th>昵称</th>
					<td><input type="text" id="name" value="" placeholder="*请输入昵称"/></td>
				</tr>
				<tr>
					<th>邮箱</th>
					<td><input type="text" id="eMail" value="" placeholder="*请输入邮箱" /></td>
				</tr>
				<tr>
					<th>身份证</th>
					<td><input type="text" id="idCard" value="" placeholder="*请输入身份证"/></td>
				</tr>
				<tr>
					<th>手机号码</th>
					<td><input type="text" id="phone" value="" placeholder="*可用于登录和找回密码"/></td>
				</tr>
				<tr>
					<th>生日验证</th>
					<td><input type="text" id="brith" value="" placeholder="输入验证码"/></td>
				</tr>
				<tr>
					<th>密码</th>
					<td><input type="password" name="cypher" placeholder="*请输入密码" /></td>
				</tr>
				<tr>
					<th><button type="button" id="search">注册</button></th>
					<td><button type="button" id="cancel">取消</button></td>
				</tr>
			</table>
		</div>
		<script>
			// 获取元素
			var userNameTxt = document.getElementById('userName')
			var nameTxt = document.getElementById('name')
			var eMailTxt = document.getElementById('eMail')
			var idCardTxt = document.getElementById('idCard')
			var phoneTxt = document.getElementById('phone')
			var brithTxt = document.getElementById('brith')
			var cypherTxt = document.getElementById('cypher')
			var searchBtn = document.getElementById('search')


			// 用户名
			var userReg = /^[a-z](\w|-){5,20}$/i;
			// 昵称 只能输入3-6个中文
			var nameReg = /^[\u4e00-\u9fa5]{3,6}$/;
			// 电子邮件
			var eMailReg = /^[a-z](\w|-){5,12}@163\.(com|cn|net)$/i;
			// 身份证
			var idCardReg = /^\d{17}(\d|X|x)$/;
			// 手机号
			var phoneReg = /^1[3-9]\d{9}$/;
			// 生日验证
			var brithReg = /^[1-2][0-29][6-9]\d(\/|-)?(0[1-9]|1[0-2])\1(0[1-9]|[1-2]\d|3[0-1])$/
			// 密码
			var cypher = /^[0-9a-z/s]{8,20}$/i

			searchBtn.onclick = function(){
				// 判断用户名是否为空
				if(userNameTxt.value === ''){
					alert('用户名不能为空')
					return
				}else if(userReg.test(userNameTxt.value) === false){
					// 判断输入的用户名是否满足条件
					alert('必须以字母开头(不能使用特殊字符只能使用数字、字母、下划线、横杠,长度6-20)')
					return
				}

				判断昵称是否为空
				if(nameTxt.value === ''){
					alert('昵称不能为空')
					return
				}else if(nameReg.test(nameTxt.value) === false){
					// 判断输入的昵称是否满足条件
					alert('只能输入3-6个中文')
					return
				}

				// 判断电子邮件是否为空
				if(eMailTxt.value === ''){
					alert('电子邮件不能为空')
					return
				}else if(eMailReg.test(eMailTxt.value) === false){
					// 判断输入的昵称是否满足条件
					alert('只能输入163邮箱,@前要6-12位 英文开头 含字母、数字、下划线、横杠')
					return
				}

				// 判断身份证是否为空
				if(idCardTxt.value === ''){
					alert('身份证不能为空')
					return
				}else if(idCardReg.test(idCardTxt.value) === false){
					// 判断输入的昵称是否满足条件
					alert('身份证为18位数（尾号可为X或x）')
					return
				}

				// 判断手机号码是否为空
				if(phoneTxt.value === ''){
					alert('手机号码不能为空')
					return
				}else if(phoneReg.test(phoneTxt.value) === false){
					// 判断输入的昵称是否满足条件
					alert('请输入正确的手机号')
					return
				}
				
				// 判断生日是否为空
				if(brithTxt.value === ''){
					alert('生日不能为空')
					return
				}else if(brithReg.test(brithTxt.value) === false){
					// 判断输入的昵称是否满足条件
					alert('请输入正确的生日')
					return
				}

				// 判断密码是否为空
				if(cypherTxt.value === ''){
					alert('密码不能为空')
					return
				}else if(cypherReg.test(cypherTxt.value) === false){
					// 判断输入的昵称是否满足条件
					alert('请输入正确的密码')
					return
				}
			}

		</script>
	</body>
</html>
